
<template>
    <div>
        <!-- 基本信息弹窗 -->
        <Modal
            v-model="thirdpartyInfoModal"
            width="1500px"
            styles='text-align:center'
            :closable="false"
            :mask-closable="false"
            footer-hide>
            <div class="container">
                <h2 class="tit">变更复审信息申请填报</h2>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                    <div class="left-part">
                        <div class="title">第三方合作模式信息
							<b class="b">( 文件支持上传 word 或 pdf 格式 )</b>
						</div>
                        <Row>
							<Col span="8">    
							<!-- 第三方合作单位名称 -->
							<div class="region">
								<div class="left">
									<span>第三方合作单位名称：</span>
								</div>
								<FormItem class="right">
									<Input
										v-if="notReview"
										v-model.trim="formValidate.companyName"
										placeholder
										clearable
										style="100%"
									></Input>
								<div style="height:35px" v-else>{{formValidate.companyName}}</div>
								</FormItem>
							</div> 
							<!-- 第三方合作单位法人 -->
							<div class="address">
								<div class="left">
									<span>第三方合作单位法人：</span>
								</div>
								<FormItem class="right">
									<Input
										v-if="notReview"
										v-model.trim="formValidate.legalPerson"
										placeholder
										clearable
										style="100%"
									></Input>
									<div style="height:35px" v-else>{{formValidate.legalPerson}}</div>
								</FormItem>
							</div>   
							</Col>                 
							<Col span="8">
								<!-- 统一社会信用代码 -->
								<div class="address">
									<div class="left">
										<span>第三方合作统一社会信用代码：</span>
									</div>
									<FormItem class="right">
										<Input
										v-if="notReview"
										v-model.trim="formValidate.creditCode"
										placeholder
										clearable
										style="100%"
										></Input>
										<div style="height:35px" v-else>{{formValidate.creditCode}}</div>
									</FormItem>
								</div>
								<!-- 第三方合作法人身份证号 -->
								<div class="address">
									<div class="left">
										<span>第三方合作法人身份证号：</span>
									</div>
									<FormItem class="right">
										<Input
										v-if="notReview"
										v-model.trim="formValidate.legalPersonCard"
										placeholder
										clearable
										style="100%"
										></Input>
										<div style="height:35px" v-else>{{formValidate.legalPersonCard}}</div>
									</FormItem>
								</div>
							</Col>
							<Col span="8">   
								<!-- 第三方合作统一社会信用代码证书文件 -->
								<div class="address">
									<div class="left">
										<span>第三方合作统一社会信用代码证书文件：</span>
									</div>
									<FormItem class="right">
										<span>未选择任何文件</span>
									</FormItem>
								</div>  
								<!-- 第三方合作协议合同文件 -->
								<div class="address">
									<div class="left">
										<span>第三方合作协议合同文件：</span>
									</div>
									<FormItem class="right">
										<span>未选择任何文件</span>
									</FormItem>
								</div>  
							</Col>
                            <Col span="24">
                                <!-- 变更原因说明 -->
                                <div class="address hongdian" >                     
                                    <div class="left">  
                                        <span style="color:red;">*</span>                      
                                        <span>变更原因说明：</span>
                                    </div>
                                    <FormItem class="right" prop="reasonChange">
                                        <Input
                                            v-if="notReview"
                                            v-model.trim="formValidate.reasonChange"
                                            placeholder="请输入变更原因"
                                            clearable  
                                            style="width:100%"                       
                                        ></Input>
                                        <div style="magrin-left:-200px;height:35px" v-if="!notReview">{{formValidate.reasonChange}}</div>
                                    </FormItem> 
                                </div>
                            </Col>
						</Row>
                    </div>
                </Form>
            </div>
            <div class="btn">
                <Button type="info" v-if="notReview" @click="handleSubmit('formValidate',1)" :disabled="disabled">
                    <Icon type="ios-checkmark" style="margin-right:5px;" size="16" />
                    保存并提交
                </Button>
                <Button type="primary" @click="handleSubmit('formValidate',0)" style="margin-left:30px" v-if="notReview" >
                    <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>暂存数据
                </Button>
                <Button @click="thirdpartyInfoModal = false" style="margin-left:30px">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭返回
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    props: {
		thirdpartyInfoModal: String,
		reasonChange: String,
        id: Number,
	},
    data() {
        return {
            formValidate: {
				id: null,
				reasonChange: "",
			},
            ruleValidate: {
				// 单位法人姓名
				reasonChange: [ { required: true, message: "请输入变更原因", trigger: "change" } ],
			},
            notReview: true,
            protocolList: [],
            hospitalId: '',
            backId: '',
        }
    },
    mounted() {
        //复审获取详情
        if(this.id) {
            this.$axios.post(api.findSupervisehirdpartyByReviewApplyId, {reviewApplyId: this.id}).then(res => {
              if (res.data.success) {
                let ret = res.data.object || [];
                this.formValidate = ret;
                this.backId = this.formValidate.id
                this.formValidate.reasonChange = this.reasonChange;
                          // if(this.formValidate) {
                          //     this.hospitalId = this.formValidate.hospitalId
                          // }
              }
            });
        } else {
            //获取机构协议列表
            this.getThirdpartyHospital()
        }       
    },
    created() {

    },
    methods: {
        //根据机构code获取机构设立情况
        getThirdpartyHospital() {	
			    this.$axios.post(api.findThirdpartyByOrgCode, {}).then(resp => {
            let ret = resp.data.object
            this.formValidate = ret;
                    // if(this.formValidate) {
                    //     this.hospitalId = this.formValidate.hospitalId
                    // }
          }).catch(err => {
            console.log(err);
          });
		    },  
        //更改审核状态
        updateType(val) {
            this.$axios.post(api.updateReviewStatusById, {id: this.id,reviewStatus:val}).then(resp => {
                    this.$Message.success("操作成功");
                    this.disabled = false 
					          this.thirdpartyInfoModal = false
                    this.$emit('getSuperviseData');
                }).catch(err => {
                    console.log(err);
                });
        },     
        // 提交表单
		handleSubmit(name,val) {	    
			this.disabled = true
			this.$refs[name].validate(valid => {
				if (valid) {
          this.formValidate.reviewStatus = val
          let url;
					if(this.mode === 'add') {
						this.formValidate.id = ''
					}
          if(this.id){
              this.formValidate.id = this.backId
              url = api.updateSuperviseThirdpartyHospital
          } else {
              url = api.insertSuperviseThirdpartyHospital
          }
					this.$axios
					.post(url, this.formValidate)
					.then(res => {
						if (res.data.code) {
							let ret = res.data;
               this.updateType(val)
						} else {
							this.disabled = false 
							this.$Message.error(res.data.message);
						}
					})
					.catch(err => {
						this.disabled = false
						this.$Message.error(res.data.err);
					});
				} else {
					this.disabled = false 
					// 必填项填写失败
					this.$Message.error("请检查必填项是否填写正确！");
				}
			});
		},
    },
}
</script>
<style lang="less" scoped>
.tit {
    text-align: center;
    font-weight: 550;
}
.btn {
    width:100%;
    text-align:center;
    margin-bottom: 20px;
}
.container {
    width: 100%;
    margin-bottom: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
      .left-part {
        width: 98%;
        margin: 20px auto;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 20px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;         
        }
        .left {
          flex: 0 0 auto;
          // width: 140px;
          text-align: left;
          margin-right: 5px;
        }
        .right {
          width: 94%;
          text-align: left;
        }
      }
      .right-part {
        width: 98%;
        margin-left: 1%;
        margin-bottom: 20px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        .title {
          font-size: 20px;
          padding-left: 15px;
          margin-bottom: 10px;
          color: #333;
          height: 40px;
          line-height: 40px;
          background: #ebedf8;
        }
        .left {
          flex: 0 0 auto;
          // width: 210px;
          text-align: left;
          margin-right: 10px;
        }
        .upload-part {
          display: flex;
          position: relative;
          align-items: center;
          top: -10px;
        //   margin-left: 35px;
          margin: 10px 0 0 30px;
          .demo-upload-list {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 4px;
          }
          // 关闭input文本框自动填充背景色黄色
          input:-webkit-autofill {
            box-shadow: 0 0 0px 1000px white inset !important;
          }

          .demo-upload-list img {
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
          }
          .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
        /deep/ .ivu-input {
          width: 200px;
          margin-right: 20px;
        }
      }
      .button-bottom {
        margin: 20px 0;
        text-align: center;
        button {
          min-width: 100px;
          // height: 50px;
        }
      }
      .ivu-col-offset-6 {
        margin: 0px;
      }
      .region,
      .address {
        display: flex;
        // flex-direction: row;    
        margin-left: 35px;
        .left {
          font-size: 14px;
          padding-top: 5px;
          span:last-child {
            font-weight: 600;
          }
        }
        input {
          display: inline-block;
          width: 400px;
          border: 1px solid black;
          line-height: 30px;
          outline: none;
          background: #fff;
          text-indent: 5px;
        }
      }
      .hongdian{
        margin-left: 25px;
      }
	  .tubiao {
        font-size:16px;
        margin-right:5px;
      }
      .region {
        .ivu-col-span-6 {
        }
        select {
          width: 100px;
          // margin-right: 20px;
          outline: none;
          option {
            text-align: center;
          }
        }
      }
      .hosAddr {
        margin-left: 500px;
      }
		.protocol {
			display: flex;
			margin: 0 40px;
			padding-bottom: 15px;
			.sort {
				width: 40%;
				margin-right: 30px;
				font-size: 14px;
				font-weight: 550;
			}
			.dsort {
				width: 16%;
				margin-right: 20px;
				font-size: 14px;
				font-weight: 550;
			}
			.asd {
				display: flex;
				.inputbox {
					width:83%;
					margin-left: 10px;
				}
			}
		}
	 	.b {
			font-size: 14px;
			color: #ff9966;
			margin-left: 20px;
		} 
        .fuwu {
        width: calc(100%);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgb(242, 242, 242);
        .xsfw {
            margin: 0;
            .select_wufu {
                margin: 0 30px;
                display: flex;
                flex-direction: row;
                padding-left: 20px;
                align-items: center;
                flex-wrap: wrap;
                div {
                    width: 13%;
                    margin: 10px 20px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
					font-size: 14px !important;
					font-weight: 550;
                    input {
                        outline: none;
                        border: none;
                    }
                }
            }
        }
    }
  }
</style>
